<template>
    <div class="box">
        <div class="outer">
            <div class="content text" placeholder="请填写" contenteditable="true" v-html="innerText" ref="inner" @input="changeText">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['value'],
    name: 'box',
    data() {
        return { innerText: this.value }
    },
    methods: {
        changeText: function () {
            this.innerText = this.$el.innerHTML;
            this.$emit('input', this.innerText);
        }
    }
}
</script>
<style scoped>
.box {
    width: 62%;
}

.outer {
    background: #fff;
}

.remark {
    margin: 0 3rem;
    display: -webkit-box;

    border-bottom: 1px solid #f5f5f5;
}

.remark_text {
    font-size: 1.5rem;
}



/*.content {
    width: 100%;
    min-height: 4.4rem;
    background: #fff;
    -webkit-user-modify: read-write-plaintext-only;
    font-size: 1.3rem;
    line-height: 4.4rem;
}*/


/*.text:empty:before {
    content: attr(placeholder);
    color: #bbb;
}

.text:focus {
    content: none;
}*/
</style>